<template>
    <div class="admin-page">
        <div class="page-header">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                <h2 style="margin: 0; color: #303133;">用户详情</h2>
                <el-button @click="goBack" size="small" icon="el-icon-arrow-left">返回</el-button>
            </div>

            <div class="detail-content" v-loading="loading">
                <!-- 基本信息 -->
                <div class="detail-section">
                    <h3 class="section-title">基本信息</h3>
                    <el-descriptions :column="2" border>
                        <el-descriptions-item label="用户类型">个人</el-descriptions-item>
                        <el-descriptions-item label="姓名">{{ userInfo.name || '-' }}</el-descriptions-item>
                        <el-descriptions-item label="证件类型">{{ getCertTypeText(userInfo.cert_type) }}</el-descriptions-item>
                        <el-descriptions-item label="证件号码">{{ userInfo.cert_no || '-' }}</el-descriptions-item>
                        <el-descriptions-item label="证件有效期">{{ userInfo.cert_begin_date || '-' }} ~ {{ userInfo.cert_end_date || '-' }}</el-descriptions-item>
                        <el-descriptions-item label="手机号">{{ userInfo.mobile_no || '-' }}</el-descriptions-item>
                        <el-descriptions-item label="电子邮箱">{{ userInfo.email || '-' }}</el-descriptions-item>
                        <el-descriptions-item label="地址">{{ userInfo.address || '-' }}</el-descriptions-item>
                        <el-descriptions-item label="备注">{{ userInfo.remark || '-' }}</el-descriptions-item>
                    </el-descriptions>
                </div>

                <!-- 银行卡绑定 -->
                <div class="detail-section">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                        <h3 class="section-title">银行卡绑定</h3>
                        <el-button type="text" size="small">银行卡列表</el-button>
                    </div>
                    <el-descriptions :column="2" border>
                        <el-descriptions-item label="银行账户名称">{{ cardInfo.card_name || '-' }}</el-descriptions-item>
                        <el-descriptions-item label="银行账户号">{{ cardInfo.card_no || '-' }}</el-descriptions-item>
                        <el-descriptions-item label="银行名称">{{ cardInfo.branch_name || '-' }}</el-descriptions-item>
                        <el-descriptions-item label="银行开户地区">{{ cardInfo.prov_id || '-' }}{{ cardInfo.area_id }}</el-descriptions-item>
                        <el-descriptions-item label="绑卡序列号">{{ cardInfo.token_no || '-' }}</el-descriptions-item>
                    </el-descriptions>
                </div>

                <!-- 结算配置 -->
                <div class="detail-section">
                    <h3 class="section-title">结算配置</h3>
                    <el-descriptions :column="2" border style="margin-bottom: 15px;">
                        <el-descriptions-item label="结算周期">{{ settleConfig.settle_cycle || '-' }}</el-descriptions-item>
                        <el-descriptions-item label="留存金额">{{ settleConfig.remained_amt || '-' }}</el-descriptions-item>
                        <el-descriptions-item label="结算手续费外扣标记">{{ getSettleFlagText(settleConfig.out_settle_flag) }}</el-descriptions-item>
                        <el-descriptions-item label="结算摘要">{{ settleConfig.settle_abstract || '-' }}</el-descriptions-item>
                        <el-descriptions-item label="起结金额">{{ settleConfig.min_amt || '-' }}</el-descriptions-item>
                    </el-descriptions>

                    <div class="table-section">
                        <h4 class="table-title">结算费率配置</h4>
                        <el-table :data="settlementRateData" border size="small" style="width: 100%">
                            <el-table-column prop="type" label="结算信息手续费类型" align="center" />
                            <el-table-column prop="min_fee" label="结算手续费最小值(元)" align="center" />
                            <el-table-column prop="max_fee" label="结算手续费最大值(元)" align="center" />
                            <el-table-column prop="fixed_fee" label="结算手续费固定金额(元)" align="center" />
                            <el-table-column prop="percentage" label="结算手续费百分比(%)" align="center" />
                        </el-table>
                    </div>
                </div>

                <!-- 取现配置 -->
                <div class="detail-section">
                    <h3 class="section-title">取现配置</h3>
                    <div class="sub-section">
                        <h4 class="sub-title">T1取现配置</h4>
                        <el-descriptions :column="2" border>
                            <el-descriptions-item label="是否开通">
                                <el-tag :type="withdrawConfig.switch_state ? '0' : '1'">
                                    {{ withdrawConfig.switch_state ? '关闭' : '开通' }}
                                </el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="提现手续费(固定/元)">{{ withdrawConfig.fix_amt || '0元' }}</el-descriptions-item>
                            <el-descriptions-item label="费率(百分比/%)">{{ withdrawConfig.fee_rate || '0%' }}</el-descriptions-item>
                            <el-descriptions-item label="手续费内外扣标记">{{ withdrawConfig.out_cash_flag || '内扣' }}</el-descriptions-item>
                        </el-descriptions>
                    </div>
                </div>

                <!-- 电子回单配置 -->
                <div class="detail-section">
                    <h3 class="section-title">电子回单配置</h3>
                    <el-descriptions :column="2" border>
                        <el-descriptions-item label="开关状态">
                            <el-tag :type="elecReceiptConfig.switch_state === '1' ? 'success' : 'danger'">
                                {{ elecReceiptConfig.switch_state === '1' ? '开启' : '关闭' }}
                            </el-tag>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            huifuId: '',
            userInfo: {},
            cardInfo: {},
            settleConfig: {},
            withdrawConfig: {},
            elecReceiptConfig: {},
            settlementRateData: []
        }
    },
    created() {
        // 从localStorage获取huifu_id
        const userData = JSON.parse(localStorage.getItem('huifuUserDetail'));
        if (userData && userData.huifu_id) {
            this.huifuId = userData.huifu_id;
            this.getUserDetail();
        } else {
            this.$message.error('未找到用户ID');
            this.goBack();
        }
    },
    methods: {
        goBack() {
            this.$router.go(-1);
        },

        // 获取用户详情
        getUserDetail() {
            this.loading = true;
            this.$http.get('/admin/HuiFuApi/infoUser', {
                params: { huifu_id: this.huifuId }
            }).then(result => {
                if (result.code === 200 && result.data) {
                    this.parseUserData(result.data);
                } else {
                    this.$message.error(result.msg || '获取用户详情失败');
                }
            }).catch(error => {
                console.error('获取用户详情失败:', error);
                this.$message.error('获取用户详情失败，请重试');
            }).finally(() => {
                this.loading = false;
            });
        },

        // 解析用户数据
        parseUserData(data) {
            try {
                // 解析个人基本信息
                if (data.indv_base_info) {
                    this.userInfo = JSON.parse(data.indv_base_info);
                }

                // 解析银行卡信息
                if (data.card_info) {
                    this.cardInfo = JSON.parse(data.card_info);
                }

                // 解析结算配置
                if (data.settle_config) {
                    this.settleConfig = JSON.parse(data.settle_config);
                    // 生成结算费率配置数据
                    this.generateSettlementRateData();
                }

                // 解析电子回单配置
                if (data.elec_receipt_config) {
                    this.elecReceiptConfig = JSON.parse(data.elec_receipt_config);
                }

            } catch (error) {
                console.error('解析用户数据失败:', error);
                this.$message.error('解析用户数据失败');
            }
        },

        // 生成结算费率配置数据
        generateSettlementRateData() {
            this.settlementRateData = [
                {
                    type: '工作日',
                    min_fee: '-',
                    max_fee: '-',
                    fixed_fee: this.settleConfig.workday_constant_amt || '0.00',
                    percentage: this.settleConfig.workday_fixed_ratio || '0.00'
                },
                {
                    type: '节假日',
                    min_fee: '-',
                    max_fee: '-',
                    fixed_fee: this.settleConfig.constant_amt || '0.00',
                    percentage: this.settleConfig.fixed_ratio || '0.00'
                }
            ];
        },

        // 获取证件类型文本
        getCertTypeText(certType) {
            const certTypeMap = {
                '00': '身份证',
                '01': '护照',
                '02': '军官证',
                '03': '士兵证',
                '04': '港澳通行证',
                '05': '台湾通行证',
                '06': '临时身份证',
                '07': '户口本',
                '08': '其他'
            };
            return certTypeMap[certType] || '身份证';
        },

        // 获取结算手续费外扣标记文本
        getSettleFlagText(flag) {
            const flagMap = {
                '1': '外扣',
                '2': '内扣'
            };
            return flagMap[flag] || '-';
        }
    }
}
</script>

<style scoped lang="less">
.admin-page {
    padding: 20px;

    .page-header {
        background: #fff;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

        .detail-content {
            .detail-section {
                margin-bottom: 30px;

                &:last-child {
                    margin-bottom: 0;
                }

                .section-title {
                    font-size: 16px;
                    font-weight: bold;
                    color: #303133;
                    margin-bottom: 15px;
                    padding-bottom: 8px;
                    border-bottom: 2px solid #409EFF;
                }

                .sub-section {
                    margin-top: 15px;

                    .sub-title {
                        font-size: 14px;
                        font-weight: bold;
                        color: #606266;
                        margin-bottom: 10px;
                    }
                }

                .table-section {
                    margin-top: 15px;

                    .table-title {
                        font-size: 14px;
                        font-weight: bold;
                        color: #606266;
                        margin-bottom: 10px;
                    }
                }

                /deep/ .el-descriptions {
                    .el-descriptions-item__label {
                        font-weight: 500;
                        color: #606266;
                        background-color: #fafafa;
                        width: 150px;
                    }

                    .el-descriptions-item__content {
                        color: #303133;
                    }
                }

                /deep/ .el-table {
                    .el-table__header {
                        th {
                            background-color: #fafafa;
                            color: #606266;
                            font-weight: 500;
                        }
                    }
                }
            }
        }
    }
}
</style>
